<template>
  <div class="app-container" id="app">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <BaseBox class="cart-box" style="background: #fff">
      <template #title>
        <div class="thead">
          <div class="tr">
            <div class="th">名字</div>
            <div class="th">图片</div>
            <div class="th">单价</div>
            <div class="th">个数</div>
            <div class="th">总价</div>
            <div class="th">采摘日期</div>
            <div class="th">操作</div>
          </div>
        </div>
      </template>
      <template>
        <!-- 主体区域 -->
        <div class="tbody">
          <div v-for="(item, index) in fruitList" :key="item.id" class="tr">
            <div class="td">
              <BaseCheckBox v-model="item.isChecked">{{
                item.name
              }}</BaseCheckBox>
            </div>
            <div class="td"><img :src="item.icon" alt="" /></div>
            <div class="td">{{ item.price }}</div>
            <div class="td"><BaseInputNum v-model="item.num" /></div>
            <div class="td">{{ item.price * item.num }}</div>
            <div class="td pick-td">{{ item.pickTime | formatTime }}</div>
            <div class="td">
              <BaseButton @click="del(index)" type="danger">删除</BaseButton>
            </div>
          </div>
        </div>
        <!-- 购物车 -->
        <div v-if="fruitList.length > 0" class="bottom">
          <!-- 全选 -->
          <BaseCheckBox v-model="checkAll">全选</BaseCheckBox>
          <div class="right-box">
            <!-- 所有商品总价 -->
            <span class="price-box"
              >总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{
                totalPrice
              }}</span></span
            >
            <!-- 结算按钮 -->
            <BaseButton type="success">结算({{ totalCount }})</BaseButton>
          </div>
        </div>
        <div v-else class="empty">
          <BaseTitle>🛒空空如也</BaseTitle>
        </div>
      </template>
    </BaseBox>
  </div>
</template>

<script>
// 导入dayjs
import * as dayjs from "dayjs";

export default {
  name: "App",
  data() {
    return {
      // 默认值从本地存储取，能取到就用本地存储的
      // 取不到给默认数组，加一个 ||
      fruitList: JSON.parse(localStorage.getItem("shop83")) || [
        {
          id: 1,
          name: "火龙果",
          icon: "http://autumnfish.cn/static/火龙果.png",
          isChecked: true,
          num: 2,
          price: 6,
          pickTime: 1648121641000,
        },
        {
          id: 2,
          name: "荔枝",
          icon: "http://autumnfish.cn/static/荔枝.png",
          isChecked: false,
          num: 7,
          price: 20,
          pickTime: 1647121641000,
        },
        {
          id: 3,
          name: "榴莲",
          icon: "http://autumnfish.cn/static/榴莲.png",
          isChecked: false,
          num: 3,
          price: 40,
          pickTime: 1646121641000,
        },
        {
          id: 4,
          name: "鸭梨",
          icon: "http://autumnfish.cn/static/鸭梨.png",
          isChecked: true,
          num: 10,
          price: 3,
          pickTime: 1645121641000,
        },
        {
          id: 5,
          name: "樱桃",
          icon: "http://autumnfish.cn/static/樱桃.png",
          isChecked: false,
          num: 20,
          price: 34,
          pickTime: 1644121641000,
        },
      ],
    };
  },

  methods: {
    del(index) {
      if (confirm("确认要删除吗？")) {
        this.fruitList.splice(index, 1);
      }
    },
  },

  computed: {
    // 计算总价
    totalPrice() {
      /*
      // 依赖了数组
      let sum = 0;
      // 累加每个商品的单价*数量
      this.fruitList.forEach((v) => (sum += v.price * v.num));
      return sum
      */
      // reduce改写
      // return this.fruitList.reduce( (sum, v) => sum += v.price * v.num, 0)

      // 只统计选中的商品
      return this.fruitList.reduce((sum, v) => {
        // 如果选中了
        if (v.isChecked) {
          // 就累加起来
          sum += v.price * v.num;
        }

        return sum;
      }, 0);
    },

    // 计算数量
    totalCount() {
      /*
      let count = 0;
      this.fruitList.forEach((v) => (count += v.num));
      return count;
    */
      // return this.fruitList.reduce( (sum, v) => sum += v.num, 0)

      // 只统计选中的商品
      return this.fruitList.reduce((sum, v) => {
        // 如果选中了
        if (v.isChecked) {
          // 就累加起来
          sum += v.num;
        }

        return sum;
      }, 0);
    },

    // 全选的双向绑定
    checkAll: {
      get() {
        // 对于数据而言，就是取
        // 对于界面就是赋，但我这里写的是数据部分所以就是取
        // 所以这里return true界面就拿到true
        // return true

        // 逻辑：上面数组里的数据都选中了就得到true，但凡有一个没选中就只得到false
        // every：如果里面都return true结果才是true，但凡有一个false就return false
        return this.fruitList.every((v) => v.isChecked);
      },

      set(val) {
        // 当全选是true，那么所有的上面的checkbox都是true
        // 当全选是false，那么所有的上面的checkbox都是false
        this.fruitList.forEach((v) => (v.isChecked = val));
      },
    },
  },

  // 过滤器
  filters: {
    formatTime(val) {
      return dayjs(val).format("YYYY/MM/DD");
    },
  },

  // 侦听器
  watch: {
    fruitList: {
      deep: true,
      handler() {
        // 找到数量为0的那行数据的下标
        let idx = this.fruitList.findIndex((v) => v.num == 0);
        // 找到了得到下标，找不到为-1，-1有必要删除吗？没必要
        if (idx != -1) {
          // 再做删除
          this.fruitList.splice(idx, 1);
        }

        localStorage.setItem("shop83", JSON.stringify(this.fruitList));
      },
    },
  },
};
</script>

<style lang="less" scoped>
.app-container {
  width: 1000px;
  margin: 0 auto;
}
// 顶部面包屑导航
.breadcrumb {
  font-size: 16px;
  color: gray;
  margin-bottom: 10px;
  padding: 5px;
}
// 购物车布局
.cart-box.base-box {
  background-color: #fff;
  .table {
    width: 100%;
    text-align: left;
    border-radius: 2px 2px 0 0;
    border-collapse: separate;
    border-spacing: 0;
  }
  .th {
    color: gray;
    font-weight: 600;
    text-align: left;
    transition: background 0.3s ease;
  }

  .th {
    text-align: center;
  }

  .th,
  .td {
    position: relative;
    padding: 16px 16px;
    overflow-wrap: break-word;
    flex: 1;
  }
  .td img {
    width: 100px;
  }
  .pick-td {
    font-size: 14px;
  }

  .tr {
    display: flex;
    cursor: pointer;
    align-items: center;
  }
  .tbody .tr {
    border-bottom: 1px solid #ebeef5;
  }
  .tbody .tr:hover {
    background-color: #fbebd4;
  }
  .tr:nth-child(2n) {
    background-color: #fafafa;
  }
  .td {
    display: flex;
    justify-content: center;
    align-self: center;
  }

  .table img {
    width: 100px;
    height: 100px;
  }

  .bottom {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;
    border-top: none;
    padding-left: 20px;
  }
  .right-box {
    display: flex;
    align-items: center;
  }
  .price {
    color: hotpink;
    font-size: 30px;
    font-weight: 700;
    margin-right: 10px;
  }
  .price-box {
    display: flex;
    align-items: center;
  }
  .empty {
    text-align: center;
    font-size: 30px;
    color: #909399;
    height: 200px;
    font-size: 80px;
    line-height: 200px;
    box-sizing: border-box;
    cursor: pointer;
  }
}
</style>
